<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加影讯</title>

    <!-- Bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css"  >
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"  >
    <link rel="stylesheet" href="css/bootstrap-multiselect.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="js/bootstrap-table-export.js"></script>
    <script src="./js/common.js"></script>
    <script src="js/bootstrap-multiselect.js"></script>

    <script src="js/moment-with-locales.min.js"></script>
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="js/bootstrap-datetimepicker.min.js"></script>
</head>

<hr>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <!-- 电影信息表格-->
            <table id="movietable" class="table table-hover">

            </table>
        </div>

        <!-- 添加电影信息表单-->
        <div class="col-md-8 column">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <input type="hidden" class="form-control" id="movieId" />

                    <label for="inputmoviename" class="col-sm-2 control-label">电影名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="title" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="country"  class="col-sm-2 control-label">国家</label>
                    <select id="selectpicker" name="countryname">
                        <option id="country"  name="choose">请选择</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="type"  class="col-sm-2 control-label">影片格式</label>
                    <select id="movietype" name="movieTypeId">
                        <option id="typemovie" name="choose">请选择</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="type"  class="col-sm-2 control-label">影片类型</label>
                    <select id="moviestyle" name="movieStyleId" multiple="multiple">

                    </select>
                </div>

                <div class="form-group">
                    <label for="inputmovierating" class="col-sm-2 control-label">评分</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="rating" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">首映日期：</label>
                    <!--指定 date标记-->
                    <div class='input-group date' id='setpubdate'>
                        <input type='text' class="form-control" id="pubDate"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputlength" class="col-sm-2 control-label">电影时长(分钟)</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="length" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputpotersmall" class="col-sm-2 control-label">缩略图URL</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="posterSmall" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputpoterlarge" class="col-sm-2 control-label">首页大图URL</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="posterLarge" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="input" class="col-sm-2 control-label">是否在售</label>
                    <input type="radio" id="onval" name="radio" value="1" checked>正在热映
                    <input type="radio" id="soonval" name="radio" value="2">即将上映
                </div>


                <!--<div class="form-group">-->
                <!--<div class="col-sm-offset-2 col-sm-10">-->
                <!--<div class="checkbox">-->
                <!--<label><input type="checkbox" />Remember me</label>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default" onclick="savemovieinfo()">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    $(function(){
        checkCookie();
        createtable();
        getcountryname("selectpicker");
        getmovietype("movietype");
        getmoviestyle("moviestyle");

        //首映日期选择
        $('#setpubdate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
    });

    /**
     * 电影信息表格
     */
    function createtable() {
        var alltables = [];
        $.ajax({
            url: SERVER_URL + "/manageback/movie/list",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            success: function (result) {
                alltables = result.data.list;
            },
            complete: function () {

            },
            error: function () {
            }
        });

        $('#movietable').bootstrapTable('destroy').bootstrapTable({
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            locale:'zh-CN',
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            searchOnEnterKey: true,
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 1,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                field: 'title',
                title: "电影名称"
            }],
            data: alltables
        });
        //点击数据连接表格中的行触发点击事件：显示连接信息
        $('#movietable').on('click-row.bs.table', function (e, row, element)
        {
            console.log(row);
            var s = $("#selectpicker").val()
            console.log(s);
            document.getElementById('movieId').value = row.movieId;
            document.getElementById('title').value = row.title;
            document.getElementById('rating').value = row.rating;
            document.getElementById('pubDate').value = row.pubDate;
            document.getElementById('length').value = row.length;
            document.getElementById('posterSmall').value = row.posterSmall;
            document.getElementById('posterLarge').value = row.posterLarge;
            //设置在售状态
            if(row.movieStatusId=='2'){
                $("input[type='radio'][name='radio']").get(1).checked = true;
            }else{
                $("input[type='radio'][name='radio']").get(0).checked = true;
            }

        });

    }


    function savemovieinfo() {
        var url;
        var movieId = $("#movieId").val();
        var title = $("#title").val();
        var countryId = $("#selectpicker").val();
        var movieTypeId = $("#movietype").val();
        var movieStatusId = $('input[name="radio"]:checked').val();
        var rating = $("#rating").val();
        var pubDate = $("#pubDate").val();
        var length = $("#length").val();
        var posterSmall = $("#posterSmall").val();
        var posterLarge = $("#posterLarge").val();

        var movieStyleId = $('#moviestyle').val();
        for(var i=0;i<movieStyleId.length;i++){
            //console.info(movieStyleId[i]);
            var styledata={
                "movieId":movieId,
                "movieStyleId":movieStyleId[i]
            }
            console.log(styledata);
            //保存影片类型
            $.ajax({
                url: SERVER_URL + "/manageback/r/movie/moviestyle/add",
                dataType: "json",   //返回格式为json
                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                data:styledata,
                type: "post",   //请求方式
                success: function (result) {
                    //console.log(result);
                    alert("添加成功");
                },
                complete: function () {

                },
                error: function () {
                    alert("影片类型添加失败");
                }
            });

        }

        console.log(movieId)
        if(movieId==''){
            var data={
                "movieId":movieId,
                "title":title,
                "countryId":countryId,
                "movieTypeId":movieTypeId,
                "movieStatusId":movieStatusId,
                "rating":rating,
                "pubDate":pubDate,
                "length":length,
                "posterSmall":posterSmall,
                "posterLarge":posterLarge
            };
            url = SERVER_URL + "/manageback/movie/add";
        }else{
            var data={
                "movieId":movieId,
                "title":title,
                "movieStatusId":movieStatusId,
                "rating":rating,
                "pubDate":pubDate,
                "length":length,
                "posterSmall":posterSmall,
                "posterLarge":posterLarge
            };
            url = SERVER_URL + "/manageback/movie/update"
        }

        $.ajax({
            url: url,    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            data:data,
            type: "post",   //请求方式
            success: function (result) {
                alert('添加成功');
            },
            complete: function () {

            },
            error: function () {
            }
        });



    }

    //设置国家名选项
    function getcountryname(tcId) {

        $.ajax({
            url: SERVER_URL + "/manageback/country/list",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            success: function (result) {
                var h="";
                $.each(result.data.list, function(key, value) {//拼接option
                    h += "<option value='" + value.countryId + "'>" + value.countryName
                        + "</option>";
                });
                $("#"+tcId).append(h);//append 添加进去并展示
                $("#"+tcId).on("change",function(a,b,c){
                        var index = $("#"+tcId+" option:selected")[0].index-1;

                        })
            },
            complete: function () {

            },
            error: function () {
            }
        });

    }

    //设置影片格式
    function getmovietype(tcId) {

        $.ajax({
            url: SERVER_URL + "/manageback/movietype/list",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            success: function (result) {
                var h="";
                $.each(result.data.list, function(key, value) {//拼接option
                    h += "<option value='" + value.movieTypeId + "'>" + value.typeName
                        + "</option>";
                });
                $("#"+tcId).append(h);//append 添加进去并展示
                $("#"+tcId).on("change",function(a,b,c){
                    var index = $("#"+tcId+" option:selected")[0].index-1;

                })
            },
            complete: function () {

            },
            error: function () {
            }
        });

    }

    //设置影片类型
    function getmoviestyle(tcId) {

        $.ajax({
            url: SERVER_URL + "/manageback/moviestyle/list",    //请求的url地址
            dataType: "json",   //返回格式为json
            async: false,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "post",   //请求方式
            success: function (result) {
                $("#"+tcId).empty();
                var h="";
                $.each(result.data.list, function(key, value) {//拼接option
                    h += "<option value='" + value.movieStyleId + "'>" + value.styleName
                        + "</option>";
                });
                $("#"+tcId).append(h);//append 添加进去并展示
                $("#"+tcId).on("change",function(a,b,c){
                    var index = $("#"+tcId+" option:selected")[0].index-1;

                });

                $('#'+tcId).multiselect("destroy").multiselect({
                    buttonClass: 'btn',
                    buttonWidth: 'auto',
                    buttonText: function(options) {
                        if (options.length == 0) {
                            return '请选择类型';
                        }
                        else {
                            var selected = '';
                            options.each(function() {
                                selected += $(this).text() + ',';
                            });
                            return selected.substr(0, selected.length -1) ;
                        }
                    },
                    nonSelectedText: '请选择数据',
                    enableFiltering: true,
                    allSelectedText:'取消全选',
                    selectAllText: '全选',
                    enableClickableOptGroups: true,
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    dropRight: true,

                });
                $(".multiselect-search").attr('placeholder','搜索');


            },
            complete: function () {

            },
            error: function () {
            }
        });



    }

</script>


</body>
</html>